<template>
 <div>
  御剑乘风来,除魔天地间!===app==={{msg1}}
  <RefCom ref="box"></RefCom>
  <h1 ref="dom"  v-if=flag>我是h1</h1>
  <button @click='handel'>点击让h1显示或者隐藏</button>
  <input type="text" ref="inputDom">
 </div>
</template>
<script>
import RefCom from './ref/RefCom.vue'
export default{
  components:{RefCom},
    name:'',
    data () {
        return {
          msg1:'',
          flag:true
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
      handel(){
        this.flag=!this.flag
         console.log(this.$refs.dom)//获得自己的h1标签
        this.$nextTick(()=>{
           console.log(this.$refs.dom),666

        });
        
      }
    },
    mounted() {
      console.log(this.$refs.box)//获取来组件RefCom的实例对象this.$refs.box=组件的this
      this.msg1=this.$refs.box.msg
      console.log(this.$refs.inputDom)//获得input标签
      this.$refs.inputDom.focus()//聚焦,页面刷新就立刻出现


    },
}
</script>
<style lang='less'  scoped>
    
</style>
